<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高性能</title>
</head>
<body>
<ul id="container"></ul>
<script>
    //需要插入的容器
    let ul = document.getElementById('container');
    // 插入十万条数据
    let total = 1000;
    // 一次插入 20 条
    let once = 20;
    //总页数
    let page = total/once
    //每条记录的索引
    let index = 0;
    //循环加载数据
    function loop(curTotal,curIndex){
        if(curTotal <= 0){
            return false;
        }
        //每页多少条
        let pageCount = Math.min(curTotal , once);
        function main(){
            console.log(234);
            let fragment=document.createDocumentFragment();
            for(let i = 0; i < pageCount; i++){
                let li = document.createElement('li');
                li.innerText = curIndex + i + ' : ' + ~~(Math.random() * total)
                fragment.appendChild(li)
            }
            ul.appendChild(fragment);
            loop(curTotal - pageCount,curIndex + pageCount)
        }
        //setTimeOut的执行时间并不是确定的 在setTimeout中对dom操作，必须等到屏幕绘制才能更新带屏幕上 如果不一致
        //导致丢帧操作

        // setTimeout(main(),0)
    //    使用requestAnimationFrame 由系统来决定回调函数的执行时间 回调函数在每一次的刷新间隔只被执行一次 不会丢帧
        window.requestAnimationFrame(main)
    }
    loop(total,index);


</script>
</body>
</html>